import React, { Component } from 'react'
import {
  View, Text, StyleSheet, TouchableOpacity, ScrollView
} from 'react-native'

import NavBar from 'src/components/navBar'
import { formatInputPrice } from 'src/utils/CommonUtils'
import navigationhelper from 'src/components/navigationhelper'
import NameInput from 'src/components/Input/NameInput'
import {inject} from "mobx-react/native"
import Layer from "src/components/Layer"

@inject('userAuth', 'cardManager')
export default class MakePlanView extends Component {
  constructor (props) {
    super(props)
    const cardId = this.props.navigation.getParam('cardId')
    this.mounted = false
    this.state = {
      amount: undefined,
      cardId: cardId
    }
  }

  componentDidMount () {
    this.mounted = true
  }

  componentWillUnmount () {
    this.mounted = false
  }

  handleChangeText = (value) => {
    value = formatInputPrice({ price: value })
    this.setState({ amount: value })
  }

  handleNextStep = () => {
    if(!this.state.amount){
      return Layer.showMsg('请输入需要制定计划的金额')
    }
    //自助获取计划详情
    Layer.showLoading()
    this.props.cardManager.addPlan({
      token: this.props.userAuth.token,
      repayment_money: this.state.amount,
      bankcard_id: this.state.cardId
    }).then((res) => {
      Layer.hiddenLoading()
      console.log('addPlan res is ', res)
      navigationhelper.navigate('MakePlanDetailView', {data: res.data})
    }).catch(function(error){
      Layer.hiddenLoading()
      Layer.showMsg(error.message)
    })

  }

  render () {
    return (
      <View style={styles.container}>
        <NavBar
         back={()=>{navigationhelper.goBack()}} 
          title={'制定计划'}
          leftText={'卡管家'} 
          barStyle={'dark-content'}
          />
        <ScrollView
          showsVerticalScrollIndicator={false}
          style={styles.contentContainer}
          keyboardShouldPersistTaps={'handled'}>
          <Text style={styles.labelText}>{'请输入还款金额'}</Text>
          <NameInput
            keyboardType="number-pad"
            containerStyle={styles.containerStyle}
            inputStyle={styles.inputStyle}
            text={this.state.amount}
            callback={this.handleChangeText}
            showLeftText
            leftText={'￥'}
            leftTextStyle={styles.leftTextStyle} />
        </ScrollView>
        <TouchableOpacity
          style={styles.btnContainer}
          onPress={this.handleNextStep}>
          <Text style={styles.btnText}>{'下一步'}</Text>
        </TouchableOpacity>
        <View style={{ height: 16 }} />
      </View>
    )
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white'
  },
  contentContainer: {
    flex: 1,
    paddingLeft: 16,
    paddingRight: 16,
    paddingTop: 35
  },
  labelText: {
    fontSize: 20,
    color: '#2e2e2e',
    fontWeight: 'bold'
  },
  containerStyle: {
    height: 60,
    borderTopWidth: 0,
    borderLeftWidth: 0,
    borderRightWidth: 0,
    borderBottomWidth: 1,
    borderColor: '#378e93'
  },
  inputStyle: {
    paddingLeft: 0,
    paddingRight: 0,
    fontSize: 31,
    color: '#2e2e2e'
  },
  leftTextStyle: {
    fontSize: 32,
    color: '#8e8e93',
    fontWeight: 'bold',
    marginRight: 4
  },
  btnContainer: {
    height: 50,
    marginLeft: 16,
    marginRight: 16,
    borderRadius: 5,
    backgroundColor: '#ff2121',
    alignItems: 'center',
    justifyContent: 'center'
  },
  btnText: {
    fontSize: 16,
    color: 'white',
    fontWeight: 'bold'
  }
})